<template>
  <li class="item">
    <img class="avatar" :src="data.user.avatarUrl + '?params=40x40'" alt />
    <div class="info">
      <div class="top">
        <div class="name">
          <span v-text="data.user.nickname" />
<!--          <img class="vip" :src="require('@/assets/vip.png')" alt />-->
          <span class="vip" />
        </div>
        <div class="timeStr" v-text="data.timeStr" />
        <div class="likeCount">
          <span v-text="FormatCount(data.likedCount)" />
          <icon-svg icon-class="nice"/>
        </div>
      </div>
      <div class="content" v-text="data.content" />
    </div>
  </li>
</template>

<script>
import { FormatCount } from 'common/js/utils'

export default {
  name: 'item',
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  methods: {
    FormatCount (num) {
      return FormatCount(num)
    }
  }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";

  .item {
    padding: 8px;
    display: flex;
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .info {
      padding-left: 12px;
      flex: 1;
      text-align: left;
      .top {
        height: 40px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .name {
          color: @color-text-d;
          font-size: @font-size-medium;
          line-height: @font-size-large;
          .vip {
            margin-left: 8px;
            padding-left: 100px;
            background: url("~@/assets/vip.png") no-repeat;
            background-size: contain;
          }
        }
        .timeStr {
          color: @color-text-ll;
          font-size: @font-size-small;
          line-height: @font-size-medium-x;
        }
        .likeCount {
          position: absolute;
          right: 0;
          color: @color-text-l;
          font-size: @font-size-small-x;
        }
      }
      .content {
        color: @color-text;
        font-size: @font-size-medium-x;
      }
    }

  }
  .item:active { background: @color-hl-background }

</style>
